<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>本地储存</h1>
    <input class="txt" type="text">
    <hr>
    <button onclick="myset()">存</button>
    <button onclick="myget()">取</button>
    <button onclick="myclear()">清空</button>

</body>
<script>
    function myset(){
        let v = document.querySelector(".txt").value;
        //根据 键 和 值 存入本地浏览器
        localStorage.setItem('stname',v);
        console.log(v);
    }
    function myget(){
        //根据键取值
       var v= localStorage.getItem('stname');
       document.querySelector(".txt").value=v;

    //    localStorage.key(n); //返回n个键的名称

    }
    function myclear(){
        localStorage.clear();//直接删除所有存储的数据
        // localStorage.removeItem('stname');//根据 键 来删除本地存储的值
    }
</script>
</html>